<template>
  <el-main>
    <el-form label-width="60px" label-suffix=":" label-position="left">
      <el-form-item label="颜色">
        <el-color-picker v-model="configStore.config.color" />
      </el-form-item>
      <el-form-item label="计数图标" label-width="80px">
        <div class="tag" :style="{ color: configStore.config.color }">
          <img :src="configStore.getTagIcon().iconUrl" alt="tag" />
        </div>
        <el-select
          v-model="configStore.config.tagIconId"
          placeholder="Select"
          size="small"
          style="width: 150px"
        >
          <el-option v-for="item in tagIconList" :key="item.id" :label="item.id" :value="item.id">
            <div class="tag" :style="{ color: configStore.config.color }">
              <img :src="item.iconUrl" alt="tag" />
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="透明度">
        <el-row>
          <el-col :span="12">
            <el-slider v-model="configStore.config.opacity" :min="0" :max="1" :step="0.1" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="最大数">
        <el-input-number v-model="configStore.config.max" :min="0" :max="999" />
      </el-form-item>
      <el-form-item label="步值">
        <el-input-number v-model="configStore.config.step" :min="0" :max="999" />
      </el-form-item>
      <el-form-item label="背景模式" label-width="100px">
        <el-radio-group v-model="configStore.config.backgroundColorType">
          <el-radio :value="0">深色</el-radio>
          <el-radio :value="1">浅色</el-radio>
          <el-radio :value="2">无色</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开启自动启动" label-width="120px">
        <el-switch v-model="configStore.config.autoOpen" />
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script setup lang="ts">

import { useConfigStore } from '@renderer/stores/configStore'
import { debounce } from '@renderer/utils/debounceUtils'
import { tagIconList } from '@renderer/composables/iconUtils'

// 引入配置存储模块
const configStore = useConfigStore()

// 创建一个防抖函数，延迟执行传入的函数，这里延迟时间为300毫秒
const debounceFunc = debounce((config) => {
  // 调用窗口API的设置同步配置存储事件，并传入配置对象
  window.api.settingSyncConfigStoreEvent(config)
}, 300)

// 订阅配置存储的变化
configStore.$subscribe(
  // 回调函数，当配置存储发生变化时执行
  (_mutation, state) => {
    // 调用防抖函数，传入当前配置存储的状态
    debounceFunc({ ...state.config })
  },
  {
    // 设置为true，表示订阅是独立的，不会影响组件的生命周期
    detached: true
  }
)
</script>

<style scoped lang="scss">
.el-row {
  width: 600px;
}

.tag {
  width: 32px;
  height: 32px;
  font-size: 10px;
  font-weight: bold;
  line-height: 40px;

  img {
    width: 15px;
    height: 15px;
  }
}
</style>
